import React from 'react'
import './style.scss'
import { TabBar } from 'antd-mobile'
import Icon from '../Icon/index'
import { useNavigate, useLocation } from 'umi'
export default function index() {
  const navigate = useNavigate();
  const location = useLocation();
  const tabs = [
    {
      key: '/home',
      title: (active:boolean) => {
        return active? <span style={{color: '#E93323'}}>首页</span>:<span style={{color: '#333'}}>首页</span>
      },
      icon: (active: boolean) =>
        active ? <Icon name="shouye1" size={22} color="#E93323"/> : <Icon name="shouye1" size={22}  />
    },
    {
      key: '/cate',
      title: (active:boolean) => {
        return active? <span style={{color: '#E93323'}}>分类</span>:<span style={{color: '#333'}}>分类</span>
      },
      icon: (active: boolean) =>
        active ? <Icon name="fenlei" size={22}  color="#E93323"/> : <Icon name="fenlei" size={22} />
  
    },
    {
      key: '/cart',
      title: (active:boolean) => {
        return active? <span style={{color: '#E93323'}}>购物车</span>:<span style={{color: '#333'}}>购物车</span>
      },
      badge: '5',
      icon: (active: boolean) =>
        active ? <Icon name="gouwuche" size={22} color="#E93323"/> : <Icon name="gouwuche" size={22}  />
    },
    {
      key: '/user',
      title: (active:boolean) => {
        return active? <span style={{color: '#E93323'}}>我的</span>:<span style={{color: '#333'}}>我的</span>
      },
      icon: (active: boolean) =>
        active ? <Icon name="wode" size={22} color="#E93323"/> : <Icon name="wode" size={22}  />
    },
  ]
  return (
    <div className='tabbar'>
      <TabBar
        activeKey = {location.pathname}
        onChange={(key: string) => {
          navigate(key)
        }}
      >
        {tabs.map(item => (
          <TabBar.Item key={item.key} badge={item.badge} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  )
}
